<template>
   <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="提现记录"></myHead>
      <div class="content">
         <div class="item">
            <van-sticky :offset-top="50">
               <div class="item-head" @click="timeShow">
                  <p><span>2018年6月</span><img src="../../../static/img/xiajiantou.png" alt=""></p>
                  <p>支出￥100.00&emsp;收入￥1060.00</p>
               </div>
            </van-sticky>
            <div class="item-wrap">
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="item">
            <van-sticky :offset-top="50">
               <div class="item-head" @click="timeShow">
                  <p><span>2018年6月</span><img src="../../../static/img/xiajiantou.png" alt=""></p>
                  <p>支出￥100.00&emsp;收入￥1898.00</p>
               </div>
            </van-sticky>
            <div class="item-wrap">
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="item">
            <van-sticky :offset-top="50">
               <div class="item-head" @click="timeShow">
                  <p><span>2018年6月</span><img src="../../../static/img/xiajiantou.png" alt=""></p>
                  <p>支出￥100.00&emsp;收入￥1228.00</p>
               </div>
            </van-sticky>
            <div class="item-wrap">
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="item">
            <van-sticky :offset-top="50">
               <div class="item-head" @click="timeShow">
                  <p><span>2018年6月</span><img src="../../../static/img/xiajiantou.png" alt=""></p>
                  <p>支出￥100.00&emsp;收入￥888.00</p>
               </div>
            </van-sticky>
            <div class="item-wrap">
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
               <div class="item-box">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="item">
            <van-sticky :offset-top="50">
               <div class="item-head" @click="timeShow">
                  <p><span>2018年6月</span><img src="../../../static/img/xiajiantou.png" alt=""></p>
                  <p>支出￥100.00&emsp;收入￥7898.00</p>
               </div>
            </van-sticky>
            <div class="item-wrap">
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
               <div class="item-box" @click="withdrawal">
                  <div class="item-box-l">
                     <img src="../../../static/img/jinbi001.png" alt="">
                  </div>
                  <div class="item-box-r">
                     <p>
                        <span>余额提现到微信钱包</span>
                        <span>6月29日 13:56</span>
                     </p>
                     <p><span>￥</span>100.00</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <van-popup v-model="show" position="bottom">
         <van-picker show-toolbar  :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
      </van-popup>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"

    export default {
        name: "WithdrawalRecord",
        components:{
            myHead
        },
        data(){
            return {
                columns: [
                    // 第一列
                    {
                        values: ['2017', '2018', '2019', '2020'],
                        defaultIndex: 2,
                    },
                    // 第二列
                    {
                        values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        defaultIndex: 1,
                    },
                ],
                show:false
            }
        },
        methods:{
            timeShow(){
                this.show = true;
            },
            onCancel(){
                console.log('取消')
                this.show = false;
            },
            onConfirm(value, index){
                this.show = false;
                console.log(value, index)
            },
            withdrawal(){
                this.$router.push({
                    name:'extensionWithdrawalProgress'
                })
            }
        }
    }
</script>

<style scoped>
   .wrap {
      padding-top: .5rem;
      background-color: #F5F5F5;
      box-sizing: border-box;
   }
   .item-head {
      height: .75rem;
      box-sizing: border-box;
      padding: .1rem .2rem;
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      background-color: #F5F5F5;
   }
   .item-head>p:nth-child(1) {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .item-head>p:nth-child(2) {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #969696;
   }
   .item-head>p:nth-child(1)>span {
      font-size:.18rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #383838;
   }
   .item-head>p:nth-child(1)>img {
      width: .12rem;
      max-height: .07rem;
   }
   .item-wrap {
      background-color: #FFFFFF;
   }
   .item-box {
      display: flex;
      flex-flow: row;
      align-items: center;
      padding-left: .2rem;
      height: .8rem;
   }
   .item-box-l {
      width: .45rem;
      height: .45rem;
      margin-right: .1rem;
   }
   .item-box-l>img {
      width: 100%;
      height: 100%;
   }
   .item-box-r {
      width: calc(100% - .75rem);
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: .175rem 0;
      box-sizing: border-box;
      border-bottom: .01rem solid #EBEBEB;
   }
   .item-box-r>p:nth-child(1)>span:nth-child(1) {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
   }
   .item-box-r>p:nth-child(1)>span:nth-child(2) {
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #B5B5B5;
   }
   .item-box-r>p:nth-child(2) {
      font-size:.18rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
   }
   .item-box-r>p:nth-child(1) {
      height: .45rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }
   .item-box-r>p:nth-child(2)>span {
      font-size: .11rem;
   }
   .item-wrap>.item-box:nth-last-child(1)>.item-box-r {
      border: none;
   }

   /* 吸顶适配 */
   >>> .van-sticky--fixed {
      top: .5rem !important;
   }

   /* 三级联动插件自适应处理 */
   >>> .van-cell {
      color: #999999 !important;
      font-size: .15rem;
      padding: 0;
      line-height: .24rem;
   }

   >>> .van-popup {
      height: 2.7rem !important;
   }

   >>> .van-picker__columns {
      height: 2.2rem !important;
   }

   >>> .van-picker-column__wrapper > li {
      height: .44rem !important;
      line-height: .44rem !important;
   }

   >>> .van-picker-column {
      font-size: .16rem !important;
   }

   >>> .van-picker__toolbar {
      height: .44rem;
      line-height: .44rem;
   }

   >>> .van-picker__cancel {
      font-size: .14rem !important;
      padding: 0 .16rem !important;
   }

   >>> .van-picker__confirm {
      font-size: .14rem !important;
      padding: 0 .16rem !important;
   }

   >>> .van-picker__title {
      font-size: .16rem;
   }
   >>> .van-cell__right-icon {
      margin-left: .05rem;
      height: .24rem;
      font-size: .16rem;
      line-height: .24rem;
   }
</style>